<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { useForm } from '@/hooks/arco/useForm';
  import {
    queryTraineeDetails,
    createTrainee,
    updateStudent,
    genResourceUploadToken,
  } from '@/api/reemployment-management/trainee';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { useUploader } from '@/hooks/useUploader';
  import * as Lodash from 'lodash';
  import { validateIdCard } from '@/utils/validate';
  import { queryEthnicityOptions, queryBaseAreaInfo } from '@/api/platform';
  import { fillData, getInfoFromImageResource } from '@/views/lhj-v1/util';
  import {
    genderOptions,
    maritalStatusOptions,
    politicalStatusOptions,
    educationLevelOptions,
    disabilityLevelOptions,
    disabilityDegreeOptions,
  } from './data';
  import ContextMenu from './context-menu';

  const emits = defineEmits(['update']);
  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
  });
  const baseNameMap = {
    id: { key: 'id', label: '学员ID', placeholder: '' },
    name: { key: 'name', label: '学员姓名', placeholder: '请输入学员姓名' },
    gender: { key: 'gender', label: '学员性别', placeholder: '请选择学员性别' },
    birthday: {
      key: 'birthdate',
      label: '出生日期',
      placeholder: '请选择出生日期',
    },
    nation: { key: 'nationCode', label: '民族', placeholder: '请选择民族' },
    native: { key: 'native', label: '籍贯', placeholder: '请选择籍贯' },
    province: { key: 'provinceCode', label: '籍贯' },
    city: { key: 'cityCode', label: '籍贯' },
    district: { key: 'districtCode', label: '籍贯' },
    marriage: {
      key: 'maritalStatus',
      label: '婚姻状况',
      placeholder: '请选择婚姻状况',
    },
    politics: {
      key: 'politicalStatus',
      label: '政治面貌',
      placeholder: '请选择政治面貌',
    },
    education: {
      key: 'educationLevel',
      label: '文化程度',
      placeholder: '请选择文化程度',
    },
    phone: {
      key: 'phoneNumber',
      label: '联系电话',
      placeholder: '请输入联系电话',
    },
    address: {
      key: 'homeAddress',
      label: '家庭住址',
      placeholder: '请输入家庭住址',
    },
    zipCode: {
      key: 'postalCode',
      label: '邮政编码',
      placeholder: '请输入邮政编码',
    },
    idCard: {
      key: 'idcardNo',
      label: '身份证号',
      placeholder: '请输入身份证号',
    },
    household: {
      key: 'householdTown',
      label: '户口所在镇/街道',
      placeholder: '请输入户口所在镇/街道',
    },
    unemployment: {
      key: 'unemploymentCertificateNumber',
      label: '失业证或低保号码',
      placeholder: '请输入失业证或低保号码，没有填“无”',
    },
    disabilityLevel: {
      key: 'disabilityLevel',
      label: '伤残类别',
      placeholder: '请选择伤残类别',
    },
    disabilityDegree: {
      key: 'disabilityDegree',
      label: '伤残等级',
      placeholder: '请选择伤残等级',
    },
    disabilityNumber: {
      key: 'disabilityNumber',
      label: '残疾证号码',
      placeholder: '请输入残疾证号码，没有填“无”',
    },
    proTraining: {
      key: 'professionalTraining',
      label: '受过何种专业训练',
      placeholder: '请输入受过何种专业训练，没有填“无”',
    },
    family: { key: 'contacts', label: '家庭成员' },
    familyName: { key: 'name', label: '姓名' },
    familyRelationship: { key: 'relation', label: '关系' },
    familyIncome: { key: 'incomeChannel', label: '经济来源' },
    familyWorkplace: { key: 'unitName', label: '单位名称' },
    familyPosition: { key: 'unitTitle', label: '职务' },
    qual: { key: 'credential', label: '资质证件' },
    qualIdCardPerson: { key: 'idCardFrontResId', label: '身份证人像面' },
    qualIdCardInsignia: { key: 'idCardBackendResId', label: '身份证国徽面' },
    qualDisabilityCardPerson: {
      key: 'disabilityFrontResId',
      label: '残疾证人像面',
    },
    qualDisabilityDetails: {
      key: 'disabilityBackendResId',
      label: '残疾证详情面',
    },
  };

  const loading = ref(false);
  const itemId = ref(props.id);
  const infoFamilyRef = ref();
  const infoBaseForm = useForm({
    state: {
      [baseNameMap.name.key]: '',
      [baseNameMap.gender.key]: '',
      [baseNameMap.birthday.key]: '',
      [baseNameMap.nation.key]: '',
      [baseNameMap.native.key]: '',
      [baseNameMap.marriage.key]: '',
      [baseNameMap.politics.key]: '',
      [baseNameMap.education.key]: '',
      [baseNameMap.phone.key]: '',
      [baseNameMap.address.key]: '',
      [baseNameMap.zipCode.key]: '',
      [baseNameMap.idCard.key]: '',
      [baseNameMap.household.key]: '',
      [baseNameMap.unemployment.key]: '',
      [baseNameMap.disabilityDegree.key]: '',
      [baseNameMap.disabilityLevel.key]: '',
      [baseNameMap.proTraining.key]: '',
    },
    rules: {
      [baseNameMap.name.key]: {
        required: true,
        message: baseNameMap.name.placeholder,
      },
      [baseNameMap.gender.key]: {
        required: true,
        message: baseNameMap.gender.placeholder,
      },
      [baseNameMap.birthday.key]: {
        required: true,
        message: baseNameMap.birthday.placeholder,
      },
      [baseNameMap.nation.key]: {
        required: true,
        message: baseNameMap.nation.placeholder,
      },
      [baseNameMap.native.key]: {
        required: true,
        message: baseNameMap.native.placeholder,
      },
      [baseNameMap.marriage.key]: {
        required: true,
        message: baseNameMap.marriage.placeholder,
      },
      [baseNameMap.politics.key]: {
        required: true,
        message: baseNameMap.politics.placeholder,
      },
      [baseNameMap.education.key]: {
        required: true,
        message: baseNameMap.education.placeholder,
      },
      [baseNameMap.phone.key]: {
        required: true,
        message: baseNameMap.phone.placeholder,
      },
      [baseNameMap.address.key]: {
        required: true,
        message: baseNameMap.address.placeholder,
      },
      [baseNameMap.zipCode.key]: {
        required: true,
        message: baseNameMap.zipCode.placeholder,
      },
      [baseNameMap.idCard.key]: {
        required: true,
        message: baseNameMap.idCard.placeholder,
      },
      [baseNameMap.household.key]: {
        required: true,
        message: baseNameMap.household.placeholder,
      },
      [baseNameMap.unemployment.key]: {
        required: true,
        message: baseNameMap.unemployment.placeholder,
      },
      [baseNameMap.disabilityDegree.key]: {
        required: true,
        message: baseNameMap.disabilityDegree.placeholder,
      },
      [baseNameMap.disabilityLevel.key]: {
        required: true,
        message: baseNameMap.disabilityLevel.placeholder,
      },
      [baseNameMap.disabilityNumber.key]: {
        required: true,
        message: baseNameMap.disabilityNumber.placeholder,
      },
      [baseNameMap.proTraining.key]: {
        required: true,
        message: baseNameMap.proTraining.placeholder,
      },
    },
  });
  const infoFamilies = ref<any[]>([]);
  const infoQuals = ref<any>({
    [baseNameMap.qualIdCardPerson.key]: '',
    [baseNameMap.qualIdCardInsignia.key]: '',
    [baseNameMap.qualDisabilityCardPerson.key]: '',
    [baseNameMap.qualDisabilityDetails.key]: '',
  });

  const ethnicityOptions = useSelectOption({
    apiFun: queryEthnicityOptions,
    fieldNames: {
      label: 'title',
      value: 'code',
    },
  });
  const nativeOptions = useSelectOption({
    apiFun: queryBaseAreaInfo,
    fieldNames: {
      label: 'label',
      value: 'value',
      children: 'children',
    },
  });

  const handleAddFamily = () => {
    const newId = new Date().getTime().toString();
    infoFamilies.value.push({ id: newId, name: '' });
  };

  const renderTableContextMenu = () => {
    infoFamilyRef.value.addEventListener(
      'contextmenu',
      (event: PointerEvent) => {
        event.preventDefault();
        const target = event.target as any;
        if (target.tagName.toLowerCase() === 'input') {
          const parentNode = (target.parentNode as any).parentNode as any;
          const dataId = parentNode.getAttribute('data-id');
          if (!dataId) {
            return;
          }
          const contextMenu = new ContextMenu();
          contextMenu.addItem('删除', () => {
            const newOut: any[] = [];
            infoFamilies.value.forEach((item) => {
              if (`${item.id}` !== `${dataId}`) {
                newOut.push(item);
              } else {
                console.log('delete', item);
              }
            });
            infoFamilies.value = newOut;
          });
          contextMenu.show(event.pageX, event.pageY);
        }
      }
    );
  };

  const uploader1 = useUploader({
    apiFun: genResourceUploadToken,
    props: {
      listType: 'picture-card',
      limit: 1,
      defaultFileList: [],
    },
  });
  const uploader2 = useUploader({
    apiFun: genResourceUploadToken,
    props: {
      listType: 'picture-card',
      limit: 1,
      defaultFileList: [],
    },
  });
  const uploader3 = useUploader({
    apiFun: genResourceUploadToken,
    props: {
      listType: 'picture-card',
      limit: 1,
      defaultFileList: [],
    },
  });
  const uploader4 = useUploader({
    apiFun: genResourceUploadToken,
    props: {
      listType: 'picture-card',
      limit: 1,
      defaultFileList: [],
    },
  });

  const handleSave = async () => {
    console.log('infoQuals:', props.id);
    // console.log(uploader1.count, uploader1.getResourceIds())
    const contacts = infoFamilies.value;
    if (contacts.length === 0) {
      Message.warning({
        content: '请添加至少一个联系人信息!',
        closable: false,
      });
      return;
    }
    await infoBaseForm.validate();
    loading.value = true;
    const data: any = Lodash.cloneDeep(infoBaseForm.state);
    const nativeCodes = data[baseNameMap.native.key];
    if (nativeCodes.length > 0) {
      [
        data[baseNameMap.province.key],
        data[baseNameMap.city.key],
        data[baseNameMap.district.key],
      ] = nativeCodes;
    }
    data[baseNameMap.family.key] = infoFamilies.value;
    let apiFunc = createTrainee;
    if (props.id) {
      data[baseNameMap.id.key] = props.id;
      apiFunc = updateStudent;
    }
    const id1s = uploader1.getResourceIds();
    console.log('id1s:', id1s);
    data[baseNameMap.qualIdCardPerson.key] = id1s.length > 0? id1s[0] as number: null;
    const id2s = uploader2.getResourceIds();
    data[baseNameMap.qualIdCardInsignia.key] = id2s.length > 0? id2s[0] as number: null;
    const id3s = uploader3.getResourceIds();
    data[baseNameMap.qualDisabilityCardPerson.key] = id3s.length > 0? id3s[0] as number: null;
    const id4s = uploader4.getResourceIds();
    data[baseNameMap.qualDisabilityDetails.key] = id4s.length > 0? id4s[0] as number: null;
    console.log('createTrainee:', data);
    apiFunc(data)
      .then((res) => {
        Message.success(res);
        emits('update');
      })
      .catch((err) => {})
      .finally(() => {
        loading.value = false;
      });
  };

  onMounted(() => {
    renderTableContextMenu();
  });

  // 实时计算 `性别`、`出生日期`
  watch(
    () => infoBaseForm.state[baseNameMap.idCard.key],
    (newVal: any) => {
      if (newVal && validateIdCard(newVal)) {
        const gender = newVal.substring(16, 17) % 2 === 0 ? 2 : 1;
        infoBaseForm.state[baseNameMap.gender.key] = gender as any;
        const date = newVal.substring(6, 14);
        infoBaseForm.state[baseNameMap.birthday.key] = `${date.substring(
          0,
          4
        )}-${date.substring(4, 6)}-${date.substring(6)}`;
      }
    }
  );

  watch(
    () => props.id,
    (newVal) => {
      if (newVal) {
        loading.value = true;
        queryTraineeDetails(newVal)
          .then((res) => {
            const details = fillData(Lodash.cloneDeep(infoBaseForm.state), res);
            // const details = Lodash.cloneDeep(res);
            details[baseNameMap.native.key] = [
              res[baseNameMap.province.key],
              res[baseNameMap.city.key],
              res[baseNameMap.district.key],
            ];
            console.log('details:', details);
            infoBaseForm.setFieldsValue(details);
            // infoBaseForm.state = {...Lodash.cloneDeep(res)};
            if (res[baseNameMap.family.key]) {
              infoFamilies.value = Lodash.cloneDeep(
                res[baseNameMap.family.key]
              );
            }
            // 资质证书
            // infoQuals.value = Lodash.cloneDeep(res[baseNameMap.qual.key]);
            if (res.idcardFrontUrl) {
              uploader1.props.defaultFileList = [getInfoFromImageResource(res.idcardFrontUrl)];
            }
            if (res.idcardBackendUrl) {
              uploader2.props.defaultFileList = [getInfoFromImageResource(res.idcardBackendUrl)];
            }
            if (res.disabilityFrontUrl) {
              uploader3.props.defaultFileList = [getInfoFromImageResource(res.disabilityFrontUrl)];
            }
            if (res.disabilityBackendUrl) {
              uploader4.props.defaultFileList = [getInfoFromImageResource(res.disabilityBackendUrl)];
            }
          })
          .catch((err) => {})
          .finally(() => {
            loading.value = false;
          });
      }
    },
    { immediate: true }
  );
</script>

<template>
  <div class="m-trainee-add">
    <a-collapse
      expand-icon-position="right"
      :default-active-key="['base', 'family', 'quals']"
    >
      <a-collapse-item key="base" class="mt-add-item mt-add-base">
        <template #header><span class="title">基本信息</span></template>
        <a-form
          v-bind="infoBaseForm.bindProps"
          layout="vertical"
          :wrapper-col-props="{ span: 3 }"
        >
          <!-- 1 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.name.key"
                :label="baseNameMap.name.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.name.key]"
                  :placeholder="baseNameMap.name.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.idCard.key"
                :label="baseNameMap.idCard.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.idCard.key]"
                  :placeholder="baseNameMap.idCard.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.gender.key"
                :label="baseNameMap.gender.label"
                required
              >
                <a-select
                  v-model="infoBaseForm.state[baseNameMap.gender.key]"
                  :options="genderOptions"
                  :placeholder="baseNameMap.gender.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 2 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.birthday.key"
                :label="baseNameMap.birthday.label"
                required
              >
                <a-date-picker
                  v-model="infoBaseForm.state[baseNameMap.birthday.key]"
                  format="YYYY-MM-DD"
                  :placeholder="baseNameMap.birthday.placeholder"
                  style="width: 100%"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.nation.key"
                :label="baseNameMap.nation.label"
                required
              >
                <a-select
                  v-bind="ethnicityOptions.bindProps"
                  v-model="infoBaseForm.state[baseNameMap.nation.key]"
                  :placeholder="baseNameMap.nation.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.native.key"
                :label="baseNameMap.native.label"
                required
              >
                <a-cascader
                  v-model="infoBaseForm.state[baseNameMap.native.key]"
                  expand-trigger="hover"
                  path-mode
                  allow-clear
                  v-bind="nativeOptions.bindProps"
                  :placeholder="baseNameMap.native.placeholder"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 3 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.marriage.key"
                :label="baseNameMap.marriage.label"
                required
              >
                <a-select
                  v-model="infoBaseForm.state[baseNameMap.marriage.key]"
                  :options="maritalStatusOptions"
                  :placeholder="baseNameMap.marriage.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.politics.key"
                :label="baseNameMap.politics.label"
                required
              >
                <a-select
                  v-model="infoBaseForm.state[baseNameMap.politics.key]"
                  :options="politicalStatusOptions"
                  :placeholder="baseNameMap.politics.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.education.key"
                :label="baseNameMap.education.label"
                required
              >
                <a-select
                  v-model="infoBaseForm.state[baseNameMap.education.key]"
                  :options="educationLevelOptions"
                  :placeholder="baseNameMap.education.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 4 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.phone.key"
                :label="baseNameMap.phone.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.phone.key]"
                  :placeholder="baseNameMap.phone.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.address.key"
                :label="baseNameMap.address.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.address.key]"
                  :placeholder="baseNameMap.address.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.zipCode.key"
                :label="baseNameMap.zipCode.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.zipCode.key]"
                  :placeholder="baseNameMap.zipCode.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <!-- {{ o }} -->
            </a-col>
          </a-row>
          <!-- 5 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.household.key"
                :label="baseNameMap.household.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.household.key]"
                  :placeholder="baseNameMap.household.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.unemployment.key"
                :label="baseNameMap.unemployment.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.unemployment.key]"
                  :placeholder="baseNameMap.unemployment.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.disabilityLevel.key"
                :label="baseNameMap.disabilityLevel.label"
                required
              >
                <a-select
                  v-model="infoBaseForm.state[baseNameMap.disabilityLevel.key]"
                  :options="disabilityLevelOptions"
                  :placeholder="baseNameMap.disabilityLevel.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 6 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.disabilityDegree.key"
                :label="baseNameMap.disabilityDegree.label"
                required
              >
                <a-select
                  v-model="infoBaseForm.state[baseNameMap.disabilityDegree.key]"
                  :options="disabilityDegreeOptions"
                  :placeholder="baseNameMap.disabilityDegree.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.disabilityNumber.key"
                :label="baseNameMap.disabilityNumber.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.disabilityNumber.key]"
                  :placeholder="baseNameMap.disabilityNumber.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.proTraining.key"
                :label="baseNameMap.proTraining.label"
                required
              >
                <a-input
                  v-model="infoBaseForm.state[baseNameMap.proTraining.key]"
                  :placeholder="baseNameMap.proTraining.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-collapse-item>
      <a-collapse-item key="family" class="mt-add-item mt-add-family">
        <template #header><span class="title">家庭情况（必填）</span></template>
        <table ref="infoFamilyRef">
          <thead>
            <tr>
              <th colspan="1">{{ baseNameMap.familyName.label }}</th>
              <th colspan="1">{{ baseNameMap.familyRelationship.label }}</th>
              <th colspan="2">{{ baseNameMap.familyIncome.label }}</th>
              <th colspan="2">{{ baseNameMap.familyWorkplace.label }}</th>
              <th colspan="1">{{ baseNameMap.familyPosition.label }}</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) of infoFamilies"
              :key="'info_family-' + index"
              :data-id="item.id"
            >
              <td colspan="1">
                <input v-model="item[baseNameMap.familyName.key]" type="text" />
              </td>
              <td colspan="1">
                <input
                  v-model="item[baseNameMap.familyRelationship.key]"
                  type="text"
                />
              </td>
              <td colspan="2">
                <input
                  v-model="item[baseNameMap.familyIncome.key]"
                  type="text"
                />
              </td>
              <td colspan="2">
                <input
                  v-model="item[baseNameMap.familyWorkplace.key]"
                  type="text"
                />
              </td>
              <td colspan="1">
                <input
                  v-model="item[baseNameMap.familyPosition.key]"
                  type="text"
                />
              </td>
            </tr>
            <tr>
              <td colspan="7" style="font-weight: 600; padding: 5px">
                <span
                  style="cursor: pointer; user-select: none"
                  @click="handleAddFamily"
                >
                  <icon-plus />
                  <span style="margin-left: 2px">添加成员</span>
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </a-collapse-item>
      <a-collapse-item key="quals" class="mt-add-item mt-add-quals">
        <template #header><span class="title">资质证件（必填）</span></template>
        <!-- <template #image="state">
              <a-image width="200" height="120" :src="state.fileItem.url"></a-image>
            </template> -->
        <div class="mt-add-quals-imgs" v-if="!loading">
          <!-- <a-upload v-bind="uploader1.props" @change="uploader1.handleChange" :image-preview="true">
            <template #upload-button>
              <div class="mt-add-quals-imgs">
                <div class="mt-add-quals-img">
                  <div class="mt-innner-error">
                    <icon-plus />
                    <span class="text">{{ baseNameMap.qualIdCardPerson.label }}</span>
                  </div>
                </div>
              </div>
            </template>
          </a-upload> -->
          <a-upload class="mt-add-quals-img" v-bind="uploader1.props" @change="uploader1.handleChange" @before-remove="uploader1.handleBeforeRemove" image-preview>
            <template #upload-button>
              <div class="mt-innner-error">
                <icon-plus />
                <span class="text">{{ baseNameMap.qualIdCardPerson.label }}</span>
              </div>
            </template>
          </a-upload>
          <a-upload class="mt-add-quals-img" v-bind="uploader2.props" @change="uploader2.handleChange" @before-remove="uploader2.handleBeforeRemove" image-preview>
            <template #upload-button>
              <div class="mt-innner-error">
                <icon-plus />
                <span class="text">{{ baseNameMap.qualIdCardInsignia.label }}</span>
              </div>
            </template>
          </a-upload>
          <a-upload class="mt-add-quals-img" v-bind="uploader3.props" @change="uploader3.handleChange" @before-remove="uploader3.handleBeforeRemove" image-preview>
            <template #upload-button>
              <div class="mt-innner-error">
                <icon-plus />
                <span class="text">{{ baseNameMap.qualDisabilityCardPerson.label }}</span>
              </div>
            </template>
          </a-upload>
          <a-upload class="mt-add-quals-img" v-bind="uploader4.props" @change="uploader4.handleChange" @before-remove="uploader4.handleBeforeRemove" image-preview>
            <template #upload-button>
              <div class="mt-innner-error">
                <icon-plus />
                <span class="text">{{ baseNameMap.qualDisabilityDetails.label }}</span>
              </div>
            </template>
          </a-upload>
        </div>
      </a-collapse-item>
    </a-collapse>
    <div class="m-trainee-add-btns">
      <a-space>
        <ae-button purpose="cancel" @click="emits('update')">取消</ae-button>
        <ae-button purpose="save" :loading="loading" @click="handleSave">保存</ae-button>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .m-trainee-add {
    color: var(--color-text-1);
    padding: 10px;
    padding-bottom: 40px;
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .mt-add-item {
    .title {
      font-weight: 600;
      font-size: 15px;
    }
  }

  .mt-add-family {
    table {
      width: 100%;
      table-layout: fixed;

      th,
      td {
        border: 1px solid var(--color-neutral-4);
        padding: 0;
        box-sizing: border-box;
        text-align: center;
      }

      th {
        padding: 5px 0;
        background-color: var(--color-neutral-3);
      }

      td:focus {
        background-color: rgb(var(--arcoblue-1));
        outline: none;
      }

      td > input {
        outline: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        padding: 5px;
        text-align: center;
        pointer-events: auto;

        &:focus {
          background-color: rgb(var(--arcoblue-1));
        }
      }
    }

    .mt-add-family-btn {
    }
  }

  .mt-add-quals {

    .mt-add-quals-imgs {
      display: flex;
      column-gap: 20px;

      .mt-add-quals-img {
        width: 200px;
        height: 120px;
        border: 1px solid var(--color-text-4);
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
    }
  }
  .mt-add-quals :deep(.arco-upload-list-picture) {
    width: 200px !important;
    height: 120px;
    // object-fit: cover; /* 保持图片比例，可能会裁剪 */
    /* object-fit: contain; 保持图片比例，不会裁剪，但可能有留白 */
  }

  .mt-innner-error {
    width: 200px;
    height: 120px;
    color: var(--color-text-3);
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      margin-left: 3px;
    }
  }

  .m-trainee-add-btns {
    padding: 15px;
    position: absolute;
    width: 100%;
    z-index: 1000;
    bottom: 0px;
    background-color: var(--color-bg-2);
    right: 0;
    text-align: right;
  }
</style>
